<template>
	<view class="subscribe">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'预约'"></Hearder>
		<!-- #endif -->
		<view class="navTab">
			<view :class="showTab==1?'active':''" @click="tab(1)">我要预约</view>
			<view :class="showTab==2?'active':''" @click="tab(2)">我的预约</view>
		</view>
		<view v-if="showTab==1">
			<view class="list-con bgbottom">
				<view class="itemList">
					<view class="lable">预约{{changename.div_name}}:</view>
					<view class="right">
						<input placeholder="请输入预约画室" placeholder-style="color:#999;" disabled v-model="space_name">
					</view>
				</view>
				<view class="itemList">
					<view class="lable">{{changename.div_name}}状态:</view>
					<view class="right">
						<input placeholder="请输入画室状态" placeholder-style="color:#999;" disabled value="营业中">
					</view>
				</view>
				<view class="itemList">
					<view class="lable">营业时间:</view>
					<view class="right">
						<input placeholder="请输入营业时间" placeholder-style="color:#999;" disabled v-model="yingye">
					</view>
				</view>
			</view>
			<view class="sureyy" @click="yysure">确定预约  消耗{{token_num}}门票</view>
		</view>
		<view class="myyuyue" v-if="showTab==2">
			<view class="myevery" v-for="item in yylist" :key="item.id">
				<view>
					<view>{{item.space_name}}</view>
					<view>{{item.status}}</view>
				</view>
				<view>
					<view>{{item.create_time}}</view>
					<view>区间：{{item.category_name}}</view>
				</view>
			</view>
		</view>
		<Paypwd ref="paystatus" :totalprice="totalprice" @paymoney="paymoney"></Paypwd>
	</view>
</template>

<script>
	import Paypwd from '@/pages/common/paypwd.vue'
	export default {
		data(){
			return{
				showTab:1,
				specialarea_type:1,
				timelist:[],
				detail:{},
				yingye:'',
				space_name:'',
				yynum:0,
				category_id:'',
				token_num:0,
				page:1,
				yylist:[],
				totalprice:0,
				changename:''
			}
		},
		onLoad(options) {
			this.specialarea_type = options.specialarea_type
			this.request('/goods/getAppointment',{specialarea_type:this.specialarea_type}).then(res => {
				if(res.data.code==1){
					this.yingye = res.data.data.start_time + '~' + res.data.data.end_time
					this.space_name = res.data.data.space_name
					this.token_num = res.data.data.token_num
				}
			})
			this.getSpaceSetting()
			this.getinit()
		},
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.last_page) {
				this.getinit()
			}
		},
		methods:{
			getSpaceSetting(){
				this.request('/index/getSpaceSetting').then(res => {
					if(res.data.code==1){
						this.changename = res.data.data
					}
				})
			},
			getinit(){
				this.request('/goods/getAppointmentList',{page:this.page}).then(res => {
					if(res.data.code==1){
						this.yylist = this.yylist.concat(res.data.data.data)
						this.last_page = res.data.data.last_page
					}
				})
			},
			yysure(){
				this.request('/member/getIsPayPassword').then(res => {
					if(res.data.code==1){
						if(res.data.data==0){
							this.$refs.paystatus.payflag = true
						}else{
							this.$refs.paystatus.zhifuflag = true
						}
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			paymoney(){
				this.request('/goods/toAppointment',{specialarea_type:this.specialarea_type}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.$refs.paystatus.zhifuflag = false
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			tab(t){
				this.showTab = t
				this.page = 1
				this.yylist = []
				if(t==2){
					this.getinit()
				}
			}
		},
		components:{
			Paypwd
		}
	}
</script>

<style scoped lang="scss">
	.subscribe{
		.navTab{
			position: fixed;
			top: 0;
			// #ifdef  APP-PLUS
			 padding-top: 160rpx;
			// #endif
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			z-index: 9;
			border-bottom: $uni-border-bottom;
			view{
				position: relative;
				float: left;
				width: 50%;
				height: 100%;
				text-align: center;
			}
			.active{
				font-weight: 800;
				color: $uni-item-color;
			 }
			.active::after{
			    content: '';
			    position: absolute;
			    bottom: 0;
			    width: 42rpx;
			    height: 4rpx;
			    background-color: $uni-item-color;
			    left: 50%;
			    transform: translateX(-50%);
			}
		}
		.list-con{
			margin-top: 80rpx;
			padding: 0 4%;
			/* #ifdef APP-PLUS */
			padding-top: 70rpx;
			/* #endif */
			.itemList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: $uni-border-bottom;
				.lable{
					width: 25%;
				}
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 75%;
					input{
						width: 100%;
						font-size: 30rpx;
					}
				}
			}
		}
		.sureyy{
			background: $uni-item-color;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			color: #fff;
			margin: 30rpx 4%;
			font-size: 32rpx;
		}
		.myyuyue{
			margin: 80rpx 4% 0;
			/* #ifdef APP-PLUS */
			margin-top: 240rpx;
			/* #endif */
			.myevery{
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				>view{
					display: flex;
					justify-content: space-between;
					&:first-of-type{
						view{
							&:first-of-type{
								width: 80%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							&:last-of-type{
								color: $uni-text-color;
							}
						}
					}
					&:last-of-type{
						margin-top: 16rpx;
						view{
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>